<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../resource/jquery-2.1.1.js"></script>
	<script src="../resource/select2/select2.js"></script>
	<link type="text/css" rel="stylesheet"  href="../resource/select2/select2.css"/>
</head>
<body>
<input type="text" id="test"/>

<script>
	var data = [
		{
			id: 1,
			name: "下拉1"
		},
		{
			id: 2,
			name: "下拉2"
		},
		{
			id: 3,
			name: "下拉3"
		},
		{
			id: 4,
			name: "下拉5"
		}
	]


	var format = function (item) {
		return item.name;
	};

	$('#test').select2({
		placeholder: '请选择',
		id: function (item) {
			return item.id;
		},
		data: { results: data, text: 'name' },
		formatResult: format,
		formatSelection: format,
		allowClear: true
	}).on('change', function(data){
		console.log(data);
	});


</script>
</body>
</html>